<template>
	<view class="sign-layout">
		<my-header background-color="transparent"></my-header>
		<my-content class="content">
			<view class="sign_box">
				<view class="sign_content">
					<view class="sign_left">
						<view :class="item.is_sign ? 'active' : ''" class="sign_item" v-for="(item, index) in signData_1"
							:key="item.id">
							<view class="sign_index">第{{ index + 1 }}天</view>
							<image mode="aspectFit" class="sign_icon" :src="item.image"></image>
							<view class="sign_title">{{ item.text }}</view>
							<view class="sign_num">{{ item.num }}</view>

							<image v-if="item.is_sign" class="sign-done"
								src="https://www.dingxians.cn/upload/images/index/ic-done.png"></image>
						</view>
					</view>
				</view>
				
			</view>
			<view @click="sign" class="sign-btn" v-if="!is_sign"></view>
			<view  class="sign-btn1" v-else></view>
			<text v-html="sign_rule" class="sign_rule"></text>
		</my-content>

	</view>
</template>

<script>
import api from '../../api/index.js'
export default {
	data() {
		return {
			signData_1: [],
			signData_2: [{
				image: ''
			}],
			is_sign: false,
			sign_rule: ''
		}
	},
	onLoad(option) {

	},
	onShow() {
		this.getData()
	},

	methods: {
		back() {
			uni.navigateBack()
		},
		getData() {
			uni.showLoading({
				title: '数据加载中'
			})
			api.signPanels.index().then(res => {
				uni.hideLoading()
				if (res.code === 200) {
					let signData = res.data.sign_panel;
					this.signData_1 = signData

					this.is_sign = res.data.is_sign
					this.sign_rule = res.data.rule

					console.log(res.data)
				}
			}).catch(error => {
				console.log(error)
			})
		},
		sign() {
			api.userSigns.store().then(res => {
				console.log(res,"res")
				if (res.code === 200) {
					this.is_sign = true;
					this.show(res.msg)
					this.getData()
				}else if(res.code === 400){
					this.is_sign = false
					this.show(res.msg)
				}
			}).catch(error => {
				console.log(error)
			})
		},
	},
}
</script>

<style lang="scss">
.sign-layout {
	// height: 100%;
	min-height: 100vh;
	width: 100vw;
	background: url("https://www.dingxians.cn/upload/20240718/6698def30b2b6.jpg") #000;
	background-size: 100% 100%;
}

.content {
	height: 100%;
	min-height: 100vh;
	width: 100%;
	background-size: 100% 100%;

	.bg {
		height: 100vh;
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}

	.back {
		position: fixed;
		left: 20rpx;
		top: 80rpx;
		z-index: 1;
		width: 65rpx;
		height: 65rpx;
	}

	.header_title {
		position: fixed;
		left: 300rpx;
		top: 100rpx;
		z-index: 1;
		color: #fff;
	}

	.sign_box {
		width: 680rpx;
		display: flex;
		flex-direction: column;
		border-radius: 10rpx;
		/*position: absolute;
			top: 350rpx;
			left: 10rpx;*/
		margin: 450rpx auto 0;
		padding: 60rpx 25rpx 25rpx;
		background-image: url("https://www.dingxians.cn/upload/images/index/bg-sign-box.png");
		background-size: 100% 100%;

		.sign_content {
			display: flex;
			justify-content: space-between;

			.sign_left {
				/*width: 460rpx;*/
				/*height: 360rpx;*/
				display: flex;
				flex-wrap: wrap;
				margin-left: 10rpx;
				width: 100%;

				/*justify-content: space-between;*/
				.sign_item {
					background: #001757;
					border-radius: 10rpx;
					/*background: linear-gradient(to bottom, #FFCB6D, #F86F55);*/
					background-size: 100% 100%;
					position: relative;
					height: 218rpx;
					/*width: 140rpx;*/
					padding: 20rpx 0;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					color: #fff;
					font-size: 24rpx;
					width: calc(100% / 4 - 10rpx);
					box-sizing: border-box;
					margin-right: 10rpx;
					margin-bottom: 40rpx;

					&:last-child {
						width: calc(50% - 10rpx);
						margin-right: 0;
					}

					&:nth-child(4) {
						margin-right: 0;
					}

					&:nth-child(6) {
						/*margin-right: 0;*/
					}

					&.active {
						opacity: 0.5;
					}

					.sign_index {
						color: #fff;
						font-size: 30rpx;
					}

					.sign_icon {
						height: 76rpx;
						width: 76rpx;
						margin-top: 10rpx;
					}

					.sign_title {
						margin: 10rpx 0;
						background-size: 100% 100%;
						padding: 0 20rpx;
					}

					.sign_num {
						/*margin-bottom: 10rpx;*/
					}

					.sign-done {
						width: 60rpx;
						height: 60rpx;
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
					}

				}
			}

			.sign_right {
				width: 180rpx;
				height: 350rpx;
				margin-right: 20rpx;
				border-radius: 10rpx;
				background: linear-gradient(to bottom, #FFCB6D, #F86F55);
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				color: #fff;
				font-size: 24rpx;
				position: relative;

				.sign_index {
					position: absolute;
					color: #fff;
					left: 10rpx;
					top: 10rpx;
					font-size: 30rpx;
				}

				.sign_icon {
					height: 60rpx;
					margin-top: 30rpx;
				}

				.sign_title {
					margin: 10rpx 0;
				}

				.sign_num {}
			}
		}

		.sign_btn {
			margin: 20rpx auto;
			width: 480rpx;
		}
	}

	.sign_rule {
		width: 700rpx;
		display: flex;
		flex-direction: column;
		border-radius: 10rpx;
		/*position: absolute;
			top: 1000rpx;
			left: 25rpx;*/
		color: #808080;
		box-sizing: border-box;
		padding: 20rpx;
		font-size: 24rpx;
	}

	.sign-btn {
		margin: 20rpx auto 0;
		width: 610rpx;
		height: 150rpx;
		text-align: center;
		line-height: 150rpx;
		color: white;
		font-weight: bold;
		background-image: url("https://www.dingxians.cn/upload/images/index/btn-sign.png");
		background-size: 100% 100%;

		// &.disable {
		// 	background-image: url("https://www.dingxians.cn/upload/images/index/btn-sign2.png");
		// }
	}
	.sign-btn1 {
		margin: 20rpx auto 0;
		width: 610rpx;
		height: 150rpx;
		text-align: center;
		line-height: 150rpx;
		color: white;
		font-weight: bold;
		background-image: url("https://www.dingxians.cn/upload/images/index/btn-sign2.png");
		background-size: 100% 100%;
	}
}
</style>